<template>
  <div class="hhh-container">
    <!-- Add your template content here -->
  </div>
</template>

<script>
export default {
  // Component logic
}
</script>

<style lang="scss" scoped>
.item {
  width: 50%;

  .top {
    background-image: url("../assets/images/big-screen/two-title-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0px;
    margin-bottom: 24px;

    .title {
      font-family: "Tx";
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
      padding-left: 32px;
    }

    .time {
      font-size: 18px;
      color: #bebebe;
    }
  }

  .list {
    height: 352px;
    overflow-y: scroll;
    box-sizing: content-box;
    flex-wrap: wrap;

    .list-item {
      width: 48%;
      margin: 0 1%;

      .item-title {
        font-weight: 800;
        font-size: 16px;
        color: #78dfff;
        background: #164966;
        text-align: center;
        padding: 2px 0;
      }

      .item-name {
        display: flex;

        div {
          width: 25%;
          padding: 2px 0;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          background: #225a78;
          text-align: center;
        }
      }

      .item-value {
        display: flex;

        div {
          width: 25%;
          padding: 2px 0;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          background: #10405d;
          text-align: center;
        }
      }
    }
  }

  .tabs-content {
    height: 352px;
    box-sizing: content-box;

    .radio-tab {
      height: 52px;
      text-align: center;
    }

    #fourth-chart,
    #fifth-chart {
      height: 300px;
    }

    #tenth-chart {
      height: 352px;
      width: 744px;
    }

    .point-statistics {
      .point-item {
        background-image: url("../assets/images/big-screen/bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 350px;

        .top-part {
          margin: 30px 0px 24px 24px;
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 18px;
          color: #ffffff;

          .ml16 {
            margin-left: 16px;
            color: rgba(255, 255, 255, 0.85);
          }

          .value {
            font-family: "Din";
            font-weight: bold;
            font-size: 28px;
            color: #ffffff;
          }

          .name {
            font-weight: bold;
            font-size: 28px;
            color: #ffffff;
            margin-left: 8px;
          }
        }

        .bottom-part {
          margin: 0px 0px 24px 24px;
          display: flex;

          .name {
            font-weight: 500;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.85);
          }

          .value {
            font-family: "Din";
            font-weight: bold;
            font-size: 28px;
            color: #ffffff;
          }

          .mr60 {
            margin-right: 60px;
          }
        }
      }

      .h195 {
        height: 195px;
      }

      .h125 {
        height: 130px;
      }

      .mr24 {
        margin-right: 24px;
      }
    }

    .analysis {
      .top-part {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn-group {
          display: flex;
          justify-content: center;
          margin-right: 16px;

          .btn {
            padding: 8px;
            color: #fff;
            border: 1px solid #fff;
          }

          .active {
            color: #262626;
            background-color: #78dfff;
            border: 1px solid #78dfff;
          }
        }

        .my-btn {
          display: flex;
          // margin-left: 656px;
          // position: absolute;
          // margin-top: -17px;
          height: 32px;

          .btn {
            margin-right: 5px;
            color: rgba(255, 255, 255, 0.85);
            border: 1px solid #fff;
            padding: 0 8px;
            display: flex;
            align-items: center;
          }

          .active {
            color: #262626;
            background-color: #78dfff;
            border: 1px solid #78dfff;
          }
        }
      }
    }
  }

  .no-video {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 352px;
    flex-direction: column;

    .default-img {
      img {
        height: 100px;
        width: 200px;
      }
    }

    .default-text {
      color: #fff;
      font-size: 16px;
      margin-top: 8px;
    }
  }
}
</style>